<template>
	
		  <!-- swiper -->
		  <swiper class="photoList" :options="swiperOption">
			<swiper-slide v-for="expert in expertList" :key="expert.id">
				 <a :href="expert.url">
					<p><img :src="expert.imgUrl"></p>
					<p>{{ expert.name }}</p>
					<p>{{ expert.address }}</p>
				</a>
			</swiper-slide>
			  <div class="swiper-button-prev" slot="button-prev"></div>
			  <div class="swiper-button-next" slot="button-next"></div>
		  </swiper>
</template>

<script>
	import { swiper, swiperSlide } from "vue-awesome-swiper";
	import "swiper/dist/css/swiper.css";
	export default {
		name:"expertSwiper",
		components:{
			swiper,
			swiperSlide,
		},
		data() {
			return {
				expertList:[{
					id:1,
					name:'专家',
					address:'山东省医学情报协会',
					// url:'/main/expertShow/',
					imgUrl:require('../../assets/images/zhuanjia01.jpg')
				},{
					id:2,
					name:'专家',
					address:'山东省医学情报协会',
					// url:'/main/expertShow/',
					imgUrl:require('../../assets/images/zhuanjia01.jpg')
				},{
					id:3,
					name:'专家',
					address:'山东省医学情报协会',
					// url:'/main/expertShow/',
					imgUrl:require('../../assets/images/zhuanjia01.jpg')
				},{
					id:4,
					name:'专家',
					address:'山东省医学情报协会',
					// url:'/main/expertShow/',
					imgUrl:require('../../assets/images/zhuanjia01.jpg')
				},{
					id:5,
					name:'专家',
					address:'山东省医学情报协会',
					// url:'/main/expertShow/',
					imgUrl:require('../../assets/images/zhuanjia01.jpg')
				},{
					id:6,
					name:'专家',
					address:'山东省医学情报协会',
					// url:'/main/expertShow/',
					imgUrl:require('../../assets/images/zhuanjia01.jpg')
				}],
				swiperOption: {
					slidesPerView: 5,
					spaceBetween: 30,
					slidesPerGroup: 3,
					loop: true,
					loopFillGroupWithBlank: true,
					pagination: {
						el: '.swiper-pagination',
						clickable: true
					},
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev'
					}
				}
			}
		},
	}
</script>

<style>
	.photoList  {
		width: 100%;
	}


	.photoList .swiper-container img {
			width: 95px;
			height: 95px;
			margin-bottom: 15px;
		}
		.photoList .swiper-slide{
			display:flex;
			flex-direction:column;
			justify-content:space-between;
		}
		.photoList .swiper-slide a{
			display:inline-block;
			color:#666;
			font-weight:normal;
		}
	    .photoList .swiper-slide a:hover p:nth-of-type(2){
			color:#037EDB;
		}
		.photoList .swiper-slide a:hover p:nth-of-type(3){
			color:#037EDB;
		}
		.photoList .swiper-slide p:nth-of-type(2){
			color:#000;
			font-size:14px;
			margin-bottom:10px;
		}
		.photoList .swiper-slide p:nth-of-type(3){
			color:#666;
			font-size:12px;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp:2;
		}

	.swiper-button-prev{

			left:0px;
			background-image: url(../../assets/images/arrowLeft.png);
		}
		.swiper-button-next{
			right: 0px;
			background-image: url(../../assets/images/arrowRight.png);
		}
</style>
